import { useState, useEffect, FC, ReactNode, useRef } from 'react';
import { View, Text, Image, Button } from '@tarojs/components'
import OurPorpuse from '@resource/tabImg/purpose.png'
import HaiOu from '@resource/tabImg/haiou.png'
import weQrcode from '@resource/tabImg/weQrcode.jpg'
import { AtCurtain, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import Cooperate from '@resource/tabImg/cooperate.png'
import ToLink from '@resource/tabImg/toLink.png'

import './index.less';


// 定义 Props 接口
interface Props {
  children?: ReactNode;
}
type SubsidyType = {
  name: string,
  qrCode: any,
  linkNumber: number,
  show: boolean
  feature?: string
  scope: string
}

const subsidyList: Array<SubsidyType> = [
  { name: '葫芦娃特产补贴群1', qrCode: weQrcode, linkNumber: 99, show: true, scope: '全国' },
  { name: '葫芦娃特产补贴群2', qrCode: weQrcode, linkNumber: 138, show: true, scope: '全国' },
]

const newChannelList: Array<SubsidyType> = [
  { name: '演唱会票务群', qrCode: weQrcode, feature: '主营一手抢票业务，也撸货数码，美妆等', linkNumber: 99, show: true, scope: '全国' },
  { name: '茅台回收群', qrCode: weQrcode, linkNumber: 99, feature: '基本上是全网最高顶茅台回收且最稳的一家', show: true, scope: '全国' },
  { name: '数码产品回收群', qrCode: weQrcode, linkNumber: 99, feature: '新手机等数码回收比较顶的一家，在成都最好', show: true, scope: '成都' },
  { name: '茅台回收群2', qrCode: weQrcode, linkNumber: 99, feature: '成都回收茅台价格较顶的一个老板，最好是面交', show: true, scope: '成都' },
]

const Index: FC<Props> = () => {
  const [isOpened, setIsOpened] = useState<boolean>(false)
  const currentImg = useRef<string>()
  // 是否是会员
  const [isMember, setIsMember] = useState<boolean>(false)
  const [openMemberVisible, setOpenMemberVisible] = useState(false)
  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  const onOpen = (img: string) => {
    currentImg.current = img
    if (isMember) {
      setIsOpened(true)
      return
    }
    setOpenMemberVisible(true)
  }
  const onClose = () => {
    setIsOpened(false)
  }

  const onCancel = () => {
    setOpenMemberVisible(false);
  }
  return (
    <View className='manufacturerSubsidy'>
      <View className='header'>
        <Image className='porpuse' src={OurPorpuse} mode='aspectFit' />
        <Text>中签不易！我们为您直链源头厂家，实现收益最大化</Text>
      </View>
      <View className='content'>
        <Text className='content-title'>可靠｜信赖｜严选</Text>
        <View className='content-bottom'>
          <View className='explain'>
            <Text className='left'></Text>
            <Text className='center'>小海鸥会员专属</Text>
            <Text className='right'></Text>
          </View>
          {
            subsidyList.map((item: SubsidyType, index: number) => {
              const { qrCode, show, name, scope } = item
              return <View className='subsidy' key={index}>
                <View className='left'>
                  <Text className='name'>简介：
                    <Text>{name}</Text>
                  </Text>
                  <Text className='feature'>特点：
                    <Text>纯正一手特产补贴，比大多数人的渠道要高出不少</Text>
                  </Text>
                  <Text className='scope'>适用范围：
                    <Text>{scope}</Text>
                  </Text>
                </View>
                <View className='right'>
                  {
                    show ?
                      <View className='unClock'>
                        {/* <Text className='title'>小海鸥会员专属</Text> */}
                        <View className='toContact' onClick={() => onOpen(qrCode)}>
                          <Text className='unClock-left'>去对接</Text>
                          <Image className='toLink' src={ToLink} mode='aspectFit' />
                        </View>
                        <View className='show-detail'>查看项目详情</View>
                      </View>
                      :
                      <View className='menbersOnly'>
                        <Text className='notBe'>您尚未解锁该服务</Text>
                        <View className='beMember'>
                          <Text className='desc'>成为小海鸥</Text>
                          <Image className='haiou' src={HaiOu} mode='aspectFit' />
                        </View>
                      </View>
                  }
                </View>
              </View>
            })
          }
          <View className='content-newchannels'>
            <View className='channel-more'>更多一手撸货渠道信息</View>
            {
              newChannelList.map((item: SubsidyType, index: number) => {
                const { name, qrCode, show, feature, scope } = item
                return <View className='subsidy' key={index}>
                  <View className='left'>
                    <Text className='name'>简介：
                      <Text>{name}</Text>
                    </Text>
                    <Text className='feature'>特点：
                      <Text>{feature}</Text>
                    </Text>
                    <Text className='scope'>适用范围：
                    <Text>{scope}</Text>
                    </Text>
                  </View>
                  <View className='right'>
                    {
                      show ?
                        <View className='unClock'>
                          {/* <Text className='title'>小海鸥会员专属</Text> */}
                          <View className='toContact' onClick={() => onOpen(qrCode)}>
                            <Text className='unClock-left'>去对接</Text>
                            <Image className='toLink' src={ToLink} mode='aspectFit' />
                          </View>
                          <View className='show-detail'>查看项目详情</View>
                        </View>
                        :
                        <View className='menbersOnly'>
                          <Text className='notBe'>您尚未解锁该服务</Text>
                          <View className='beMember'>
                            <Text className='desc'>成为小海鸥</Text>
                            <Image className='haiou' src={HaiOu} mode='aspectFit' />
                          </View>
                        </View>
                    }
                  </View>
                </View>
              })
            }
          </View>
        </View>
      </View>
      <View className='cooperate'>
        <Text>厂家和渠道商来合作</Text>
        <Image src={Cooperate} mode="aspectFit" />
      </View>
      <AtCurtain
        isOpened={isOpened}
        onClose={onClose}
        className='member-pop'
      >
        <View className='modalContent'>
          <Image
            className='way'
            src={currentImg.current as string}
            mode='aspectFit'
          />
          <Text className='title one'>尊贵的小海鸥会员!</Text>
          <Text className='title two'>请您长按二维码，进群获取源头信息</Text>
          {/* <Text className='title three'>祝您天天有肉吃！</Text> */}
        </View>

      </AtCurtain>
      <AtModal isOpened={openMemberVisible} className='kind-tip'>
        <AtModalHeader>小海鸥温馨提示</AtModalHeader>
        <AtModalContent>
          尊敬的用户由于您未开通小海鸥会员，所以暂时无法参与该项目，祝您生活愉快！
          </AtModalContent>
        <AtModalAction>
          <Button onClick={onCancel} className='next-time'>下次一定</Button>
          <Button className='toOpen-member'>去开通</Button>
        </AtModalAction>
      </AtModal>
    </View>
  );
};

export default Index;
